<template>
	<view class="search-container">
		<input placeholder="搜索你想找的地点" class="search-address" placeholder-class="placeholder-class" v-model="keyword" @input="inputSearch" auto-focus focus />
		<scroll-view scroll-y class="scroll" v-if="addressArr.length != 0">
			<view class="address-list">
				<view class="address-item" :data-item="item" @tap="chooseAddress" v-for="(item, index) in addressArr" :key="index">
					<view class="address-top">
						<view class="title">{{ item.title }}</view>
						<view class="distance">{{ item._distance }}m</view>
					</view>

					<view class="address-bottom">
						{{ item.address }}
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="no-data" v-else>
			<image :src="noDataImg" />
			<text class="tip">暂无数据</text>
		</view>
	</view>
</template>

<script>
// var QQMapWX = require('');
import * as QQMapWX from '@/pagesA/utils/qqmap-wx-jssdk.min';
var qqmapsdk;
import { mapSearch, reverseGeocoder } from '@/pagesA/utils/map';
import { common } from '@/pagesA/utils/common.js';
import env from '@/pagesA/config/env';
// import noDataImg from '@/pagesA/assets/image/no-data.png';
const app = getApp();
export default {
	data() {
		return {
			keyword: '',
			addressArr: [],
			latitude: '',
			longitude: '',
			noDataImg: common.imgs.noDataImg
		};
	},
	onLoad(options) {
		qqmapsdk = new QQMapWX({
			key: env.mapKey
		});
	},
	onShow() {
		this.initPosition();
	},
	methods: {
		initPosition() {
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					console.log('获取定位成功:', res);
					// this.setData({
					// 	latitude: res.latitude,
					// 	longitude: res.longitude
					// });
					this.latitude = res.latitude;
					this.longitude = res.longitude;
				},
				fail: (err) => {
					console.error('获取当前定位错误:', err);
					uni.showModal({
						title: '获取定位权限失败',
						content: '获取定位权限失败，请先开启定位授权',
						confirmText: '去设置',
						complete: (res) => {
							if (res.confirm) {
								uni.openSetting({
									success: (res) => {
										console.log(res);
									}
								});
							}
						}
					});
				}
			});
		},

		inputSearch(e) {
			let value = e.detail.value;
			if (value.trim().length >= 10) {
				value = value.substr(0, 10);
			}
			setTimeout(() => {
				// this.setData({
				// 	keyword: value
				// });
				this.keyword = value;
				common.commonMethods.debounce(() => {
					this.search(value);
				}, 1000);
			}, 100);
		},

		search(keyword) {
			if (!keyword || keyword.trim().length == 0) {
				// this.setData({
				// 	addressArr: []
				// });
				this.addressArr = [];
				return;
			}
			mapSearch(
				keyword,
				{
					latitude: this.latitude,
					longitude: this.longitude
				},
				(res) => {
					// this.setData({
					// 	addressArr: res.data
					// });
					this.addressArr = res.data;
				}
			);
		},

		chooseAddress(e) {
			const item = e.currentTarget.dataset.item;
			reverseGeocoder(
				{
					latitude: item.location.lat,
					longitude: item.location.lng
				},
				(res) => {
					app.globalData.hasChooseAddress = true;
					app.globalData.chooseAddressInfo = {
						longitude: item.location.lng,
						latitude: item.location.lat
					};
					uni.navigateBack();
				}
			);
		}
	}
};
</script>
<style>
.search-container {
	height: 100vh;
	display: flex;
	flex-direction: column;
}

.search-address {
	height: 64rpx;
	background: #f6f7fa;
	border-radius: 8rpx;
	padding: 0 24rpx;
	margin: 0 30rpx;
}

.search-address,
.placeholder-class {
	font-size: 26rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	color: #949dbf;
	line-height: 64rpx;
}

.scroll {
	flex: 1;
	height: 0;
}

.address-list {
	padding: 0 30rpx 40rpx;
}

.address-item {
	padding: 24rpx 0;
	border-bottom: 1px solid #e1e2e7;
}

.address-item:last-child {
	border-bottom: 0;
}

.address-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.address-top .title {
	font-size: 28rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 550;
	color: #1e253f;
}

.address-top .distance,
.address-bottom {
	font-size: 24rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #949dbf;
}

.address-bottom {
	margin-top: 16rpx;
	text-align: justify;
}

.no-data {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.no-data image {
	width: 156rpx;
	height: 160rpx;
}

.no-data .tip {
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	color: #4b5680;
	margin-top: 16rpx;
	position: relative;
	right: 8rpx;
}
</style>
